<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Flask React</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/RichEditor.css') }}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
    <div id="target"></div>
</div>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
<script type="text/javascript" src="http://o7z6eyjps.bkt.clouddn.com/cd86bdca-54a5-11e6-819a-5600002448cajquery.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>-->
<script src="http://o7z6eyjps.bkt.clouddn.com/ebeec884-54a5-11e6-819a-5600002448careact.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>-->
<script src="http://o7z6eyjps.bkt.clouddn.com/fa8afbd8-54a5-11e6-819a-5600002448careact-dom.min.js"></script>
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>-->
<script src="http://o7z6eyjps.bkt.clouddn.com/08294b3c-54a6-11e6-819a-5600002448caJSXTransformer.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>-->
<script src="http://o7z6eyjps.bkt.clouddn.com/1cca492e-54a6-11e6-819a-5600002448cabrowser.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>-->
<script type="text/javascript" src="http://o7z6eyjps.bkt.clouddn.com/286bf7e6-54a6-11e6-819a-5600002448caimmutable.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-shim.js"></script>-->
<script type="text/javascript" src="http://o7z6eyjps.bkt.clouddn.com/34bbfdde-54a6-11e6-819a-5600002448caes6-shim.js"></script>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.css">-->
<link rel="stylesheet" href="http://o7z6eyjps.bkt.clouddn.com/49a817e6-54a6-11e6-819a-5600002448caDraft.css">
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.js"></script>-->
<script type="text/javascript" src="http://o7z6eyjps.bkt.clouddn.com/5b97ed28-54a6-11e6-819a-5600002448caDraft.js"></script>
<script type="text/babel">
      'use strict';

      const {
        Editor,
        EditorState,
        RichUtils,
        ContentState,
        convertToRaw,
        DefaultDraftBlockRenderMap,
        convertFromRaw,
      } = Draft;

      const {Map} = Immutable;

      class RichEditorExample extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            editorState: this._initEditorState(),
          };
          this.onChange = () => {};
          this.focus = () => this.refs.editor.focus();
        }

        _initEditorState() {
            const myContentState = {{data | safe}};
            const contentState = convertFromRaw(myContentState);
            const es = EditorState.createWithContent(contentState);
            return EditorState.createWithContent(contentState);
        }

        render() {
          const {editorState} = this.state;

          let className = 'RichEditor-editor';
          const style = {borderTop: 0};
          var contentState = editorState.getCurrentContent();
          if (!contentState.hasText()) {
            if (contentState.getBlockMap().first().getType() !== 'unstyled') {
              className += ' RichEditor-hidePlaceholder';
            }
          }

          return (
            <div className="RichEditorShow-root">
              <div className={className} style={style} onClick={this.focus}>
                <Editor
                  readOnly={true}
                  onChange={this.onChange}
                  blockStyleFn={getBlockStyle}
                  customStyleMap={styleMap}
                  editorState={editorState}
                  ref="editor"
                />
              </div>
            </div>
          );
        }
      }

      const styleMap = {
        CODE: {
          backgroundColor: 'rgba(0, 0, 0, 0.05)',
          fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
          fontSize: 16,
          padding: 2,
        },
        button: {
          marginTop: 10,
          textAlign: 'center',
        },
        CENTER: {
          textAlign: 'center',
        },
        BIG: {
          fontSize: 32,
        },
      };

      function getBlockStyle(block) {
        switch (block.getType()) {
          case 'blockquote': return 'RichEditor-blockquote';
          case 'atomic': return 'RichEditor-center';
          default: return null;
        }
      }

      ReactDOM.render(
        <RichEditorExample />,
        document.getElementById('target')
      );
    </script>
</body>
</html>